<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">
				
				菜单管理</h3>

				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 100px;">
						<div class="input-group-btn">
							<button type="button" class="btn btn-success btn-delete" >删除</button>
							<button type="button" class="btn btn-default btn-add">添加</button>
							<button type="button" class="btn btn-default btn-update">修改</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
		<div class="box-body table-responsive no-padding">
			<table id="menuTable" class="table table-hover">
				<thead>
				<tr>
					<th data-field="selectItem" data-checkbox="true"></th>
				</tr>
				</thead>
			</table>
        </div>
		</div>
		<!-- /.box -->
	</div>
</div>

<script src="bower_components/treegrid/jquery.treegrid.extension.js"> </script>
<script src="bower_components/treegrid/jquery.treegrid.min.js"></script>
<script src="bower_components/treegrid/tree.table.js"></script>
<script type="text/javascript">

	/**
	 * 初始化表格的列
	 */
	var columns = [
		{
			field : 'selectItem', //表头
			radio : true //单选是否显示
		},
		{
			title : '菜单ID', //标题名称
			field : 'id',    //获取后端返回的josn中key
			align : 'center', //水平居中
			valign : 'middle', //垂直居中
			width : '130px'
		},
		{
			title : '菜单名称',
			field : 'name',
			align : 'center',
			valign : 'middle',
			width : '80px'
		},
		{
			title : '上级菜单',
			field : 'parentName',
			align : 'center',
			valign : 'middle',
			sortable : true,
			width : '100px'
		},
		{
			title : '类型',
			field : 'type',
			align : 'center',
			valign : 'middle',
			width : '70px',
			formatter : function(item, index) {
				if (item.type == 1) {
					return '<span class="label label-success">菜单</span>';
				}
				if (item.type == 2) {
					return '<span class="label label-warning">按钮</span>';
				}
			}
		},
		{
			title : '排序号',
			field : 'sort',
			align : 'center',
			valign : 'middle',
			sortable : true,
			width : '70px'
		},
		{
			title : '菜单URL',
			field : 'url',
			align : 'center',
			valign : 'middle',

			width : '160px'
		},
		{
			title : '授权标识',//要显示的标题名称
			field : 'permission',//json串中的key
			align : 'center',//水平居中
			valign : 'middle',//垂直居中
			sortable : false //是否排序
		} ];

	$(function () {
		//获取菜单列表数据并加载
		loadMenuList();
		$('.input-group-btn').on('click','.btn-delete',deleteMenu)
		.on('click','.btn-add',loadMenuEdit)
		.on('click','.btn-update',loadMenuEdit);

	})
	//载入修改 添加页面
	function loadMenuEdit() {
		//判断当前操作时添加还是修改页面
		var title="添加菜单";
		if($(this).hasClass("btn-update")){
			var menuId=getSelectedId();
			//判断是否选中的菜单项
			if(!menuId){
				alert("请选择要修改的菜单项!");
				return ;
			}
			//
			if(confirm("确认要修改菜单?")==false){
				return;
			};
			title="修改菜单";
			$('#mainContentId').data("menuId",menuId)
		}
		let url="/sys/menuEdit";
		$("#mainContentId").load(url,function () {//回调函数
			//在加载完编辑页面后,为编辑页面的标题进行重新赋值
			$('.box-title').html(title);
		});
	}
	//删除菜单
	function deleteMenu() {
		//获取删除的菜单id
		var id=getSelectedId();
		//判断是否选中的菜单项
		if(!id){
			alert("请选择菜单项!");
			return ;
		}
		//弹出提示用户,是否确定删除
		if(!confirm("确定删除吗?")){
			return;
		}
		var url="/sys-menus/removeMenuById";
		var params={"menuId":id};
		//向后端发起请求,执行删除操作
		$.post(url,params,function (result) {
			if(result.state==2000){
				alert("删除成功!");
				loadMenuList();
			}else{
				alert(result.message);
			}
		})
	}

//获取单选项的选中的元素
	function getSelectedId() {
		var selections=$('#menuTable').bootstrapTreeTable('getSelections');
		if(selections.length==1){
		//alert(selections[0].id);
			return selections[0].id;
		}
	}
	
	function loadMenuList() {
		$("#mainContentId").removeData();//starter 中的中间页面去掉
		//1.构建table对象(bootstrap框架中treeGrid插件提供)
		var treeTable=new TreeTable(
				"menuTable",// 表格id值
				"sys-menus/listMenuVo",//向后端请求数据的url
				columns);
		//2.初始化table对象(底层发送ajax请求获取数据)
		treeTable.init();//getJSON,get(),...

	}


</script>













